<template>
	<view class="give-full-goods-list" :class="themeName">
		<view class="main">
			<view class="header-gfa">
				{{$zhTran('已购满')}}
				<text v-if="give_full_type == 1">{{give_full_limit}}{{$zhTran('件')}}</text>
				<text v-if="give_full_type == 2">{{give_full_limit}}{{$zhTran('元')}}</text>
				{{$zhTran('，可领取一款赠品')}}
			</view>
			<!-- 商品卡片 -->
			<block v-for="(item, index) in cartLists" :key="index">
				<view class="cart-list" @click="changeGoodsStatus(item.id,index)">
					<!-- 商品的主内容 -->
					<view class="cart-item bg-white flex" style="padding: 20rpx">
						<u-image width="180rpx" height="180rpx" :src="item.image" />
						<view class="m-l-20" style="flex: 1">
							<view class="line-2 nr">{{ item.name }}</view>
							<view class="row-between flex m-t-20">
								<view class="price flex primary">
									<price :content="item.sell_price" :color="themeColor" mainSize="36rpx"
										minorSize="28rpx" :prefix="price_symbol"></price>
								</view>
								<view class="row-between flex select">
									<u-checkbox label-size="28rpx" :active-color="themeColor" v-model="item.selected"
										:label-disabled="false" shape="circle">
									</u-checkbox>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>

		</view>


		<!-- 底部结算栏 -->
		<view class="footer flex row-center">
			<view class="right-btn br60 lighter" @click="confirmGive">{{$zhTran('确定')}}</view>
		</view>

		<!-- 加载中 -->
		<u-mask :show="isChangeLoading" :mask-click-able="false" :custom-style="{ background: 'rgba(0, 0, 0, 0)' }">
		</u-mask>
		<view class="loading" v-if="isChangeLoading">
			<u-loading size="40" :color="themeColor"></u-loading>
			<view class="white m-t-20">{{$zhTran(' 加载中... ')}}</view>
		</view>
	</view>
</template>

<script>
	import {
		apiGiveFullActiviryGoodsList,
		apiGiveFullActiviryChange
	} from "@/api/give_full_activity";

	export default {
		name: "GiveFullGoodsList",

		data() {
			return {
				cartLists: [], //购物车数据
				price_symbol: "￥",
				give_full_limit: 0,
				give_full_type: 0,
				isChangeLoading: false, //是否是操作请求中状态
				choose_id: 0
			};
		},

		methods: {
			// 获取购物车数据列表
			getCartList() {
				return apiGiveFullActiviryGoodsList().then(({
					lists,
				}) => {
					this.cartLists = [...this.cartLists, ...lists];
					this.cartLists = this.$zhTran(this.cartLists)

					return Promise.resolve();
				});
			},

			// 单选
			changeGoodsStatus(id, idx) {
				this.isChangeLoading = true;
				this.cartLists.forEach((item, index) => {
					this.cartLists[index].selected = false;
				});
				if (this.choose_id == id) {
					this.choose_id = 0
					this.cartLists[idx].selected = false;
				} else {
					this.choose_id = id
					this.cartLists[idx].selected = true;
				}
				apiGiveFullActiviryChange({
					gift_id: id,
				}).finally((res) => {
					this.isChangeLoading = false;
				});
			},

			// 确定
			confirmGive() {
				this.$Router.replaceAll({
					path: "/bundle2/pages/shop_cart/shop_cart",
					query: {
						gift_id: this.choose_id,
					}
				});
			},
		},
		async onShow() {
			await this.getCartList();
		},

		created() {
			const {
				give_full_limit,
				give_full_type,
			} = this.$Route.query
			this.give_full_limit = give_full_limit
			this.give_full_type = give_full_type
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
		},
	};
</script>
<style lang="scss">
	.give-full-goods-list {
		position: relative;
	}

	.main {
		padding-bottom: 100rpx;
	}

	.cart-list {
		.cart-item {
			margin: 20rpx 20rpx 0;
			border-radius: 10rpx;
		}

		.select {
			height: 80rpx;
			padding: 0 20rpx;
			// @include border_color();
			// border-style: solid;
		}
	}

	.header-gfa {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		padding: 24rpx;
		background-color: rgba(255, 44, 60, 0.14);
		color: rgba(255, 44, 60, 1)
	}

	.footer {
		left: 0;
		bottom: calc(env(safe-area-inset-bottom));
		width: 100%;
		z-index: 20;
		height: 100rpx;
		position: fixed;
		padding: 0 24rpx;
		box-sizing: border-box;

		.right-btn {
			padding: 23rpx 105rpx;
			@include background_color();
			color: #ffffff;
			box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
		}
	}
</style>